<template>
  <div class="wrapper">
    <el-row :gutter="20">
      <el-col :span="7"><div class="grid-content bg-purple" /></el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <div class="progress">
            <el-steps :align-center="true" :active="1" :space="300">
              <el-step title="填写商品信息" />
              <el-step title="填写商品属性" class="last" />
            </el-steps>
          </div>
          <!-- 表单部分 -->
          <div class="content">
            <el-form :model="form" label-width="120px">
              <el-form-item label="商品规格：" :required="true">
                <el-input
                  v-model="form.guige"
                  placeholder="请输入"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="商品参数：" :required="true">
                <el-input
                  v-model="form.parameter"
                  placeholder="请输入"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="商品上架：">
                <el-switch v-model="form.delivery" />
              </el-form-item>

              <el-form-item label="预售商品：">
                <el-switch v-model="form.yes" />
              </el-form-item>

              <el-form-item label="服务保障：" :required="true">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="无忧退货" name="type" />
                  <el-checkbox label="快速退款" name="type" />
                  <el-checkbox label="免费包邮" name="type" />
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="选择优惠方式：">
                <el-radio-group v-model="form.resource">
                  <el-radio label="无优惠" />
                  <el-radio label="特惠促销" />
                  <el-radio label="阶梯价格" />
                  <el-radio label="满减价格" />
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <el-button>上一步</el-button>
                <el-button type="primary" @click="onSubmit"
                  >完成提交商品</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="7"><div class="grid-content bg-purple" /></el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive } from "vue";

// do not use same name with ref
const form = reactive({
  guige: "",
  parameter: "",
  delivery: false,
  yes: true,
  type: [],
  resource: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style lang="less" scoped>
.wrapper {
  background: #ffffff;
  .progress {
    margin-bottom: 20px;
    .last {
      color: red;
      :deep(.el-step__icon) {
        background: #fcc284;
        color: black;
        :deep(.el-step__title) {
          color: black;
        }
      }
    }
  }
}
</style>
